<template>
  <Form ref="loginForm" :model="form"  @keydown.enter.native="handleSubmit">
    <FormItem prop="userName">
      <Select v-model="form.type">
        <Option value="1" label="用户"></Option>
        <Option value="2" label="教师"></Option>
        <Option value="3" label="学生"></Option>
      </Select>
    </FormItem>
    <FormItem prop="userName">
      <Input v-model="form.userName" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="16" type="ios-person"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="14" type="md-lock"></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmit" type="primary" long>登录</Button>
    </FormItem>
    <FprmItem>
      <Button type="primary" long @click="modal1 = true">注册</Button>
      <Modal
        v-model="modal1"
        title="注册"
        @on-ok="ok"
        @on-cancel="cancel">
        <div>
          账号：
          <Input prefix="ios-contact" placeholder="Enter name" style="width: auto" />
        </div>
        <br/>
        <div style="margin-top: 6px">
          密码：
          <Input placeholder="Enter name" style="width: auto">
            <Icon type="ios-contact" slot="prefix" />
          </Input>
        </div>
        <br/>
        <div>
          类型：
          <Select v-model="model2" style="width:165px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </div>
      </Modal>
    </FprmItem>
  </Form>
</template>
<script>
  export default {
    name: 'LoginForm',
    props: {
      userNameRules: {
        type: Array,
        default: () => {
          return [
            {required: true, message: '账号不能为空', trigger: 'blur'}
          ]
        }
      },
      passwordRules: {
        type: Array,
        default: () => {
          return [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    data() {
      return {
        form: {
          type: '1',
          userName: '',
          password: ''
        },
        modal1: false,

        cityList: [
          {
            value: '1',
            label: '用户'
          },
          {
            value: '2',
            label: '教师'
          },
          {
            value: '3',
            label: '学生'
          }
        ],
        model2: ''
      }
    },
    computed: {
    },
    methods: {
      handleSubmit() {
        let params={
          userName: this.form.userName,
          password: this.form.password,
          type: this.form.type
        };
        this.$emit('on-success-valid', params)
      },

      ok () {
        this.$Message.info('注册成功');
      },
      cancel () {
        this.$Message.info('取消输入');
      }
    }
  }
</script>
